<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>优惠券列表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
				<!-- 搜索用户框 -->
                <span class="search-title">使用类型：</span>
                <el-select v-model="query.param.useType" placeholder="使用类型：" class="handle-select mr10" >
                    <el-option key="1" label="全部" value="1"></el-option>
                    <el-option key="2" label="类型" value="2"></el-option>
                    <el-option key="3" label="商品" value="3"></el-option>
                </el-select>
                <!-- 做判断 -->
                <el-select v-model="query.param.resId" placeholder="商品" class="handle-select mr10">
                    <el-option v-for="item in goodsss" :key="item.id" :label="item.title"
                               :value="item.id"></el-option>
                </el-select>
                <el-select v-model="query.param.resId" placeholder="类型" class="handle-select mr10">
                    <el-option v-for="item in categorys" :key="item.id" :label="item.categoryName"
                               :value="item.id"></el-option>
                </el-select>
                <!--  -->
                <span class="search-title">开始时间：</span>
                <el-date-picker
                        v-model="query.param.startTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        style="width: 130px;"
                        placeholder="开始日期"
                ></el-date-picker>
                -
                <el-date-picker
                        v-model="query.param.endTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        style="width: 130px;"
                        placeholder="结束日期"
                ></el-date-picker>
				<!-- 搜索按钮 -->
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addVolume">增加优惠券</el-button>
            </div>
            <!-- 产品列表 -->   
            <el-table 
                :data="tableData"
                border 
                class="table" 
                ref="multipleTable" 
                header-cell-class-name="table-header" 
                @selection-change="handleSelectionChange"
            >
                <el-table-column prop="id" label="ID" align="center"></el-table-column>
                <!-- 1-平台券 2-商家券 -->
                <el-table-column label="优惠券类型" align="center">
                    <template slot-scope="scope">
                        {{scope.row.voucherType == 1 ? '平台券' : ''}}
                        {{scope.row.voucherType == 2 ? '商家券' : ''}}
                    </template>
                </el-table-column>
                <!--1-针对全部商品 2-针对一个类型的商品(商家券才有此功能) 3-针对一个商品(商家券才有此功能)  -->
                <el-table-column label="使用类型" align="center">
                    <template slot-scope="scope">
                        {{scope.row.useType == 1 ? '全部' : ''}}
                        {{scope.row.useType == 2 ? '某类型' : ''}}
                        {{scope.row.useType == 3 ? '某商品' : ''}}
                    </template>
                </el-table-column>
                <!-- useType=1等于全部 所有商品所有类型可以使用此卷。useType=2 就是类型id 4个类型 useType=3 商品 所有商品都有可能。  -->
                <el-table-column prop="resId" label="资源" align="center"></el-table-column>

                <!-- 券种 1-满减券 2-折扣券 -->
                <el-table-column prop="type" label="券种" align="center"></el-table-column>
                <el-table-column label="券种" align="center">
                    <template slot-scope="scope">
                        {{scope.row.type == 1 ? '满减券' : ''}}
                        {{scope.row.type == 2 ? '折扣券' : ''}}
                    </template>
                </el-table-column>
                <!--当为折扣券的时候 最多可折扣多少。0-不限制  -->
                <el-table-column prop="maxDiscountPrice" label="折扣金额" align="center"></el-table-column>
                <!-- 多少张优惠券 -->
                <el-table-column prop="number" label="多少张优惠券" align="center"></el-table-column>
                <!-- 开始时间 -->
                <el-table-column prop="startTime" label="开始时间" align="center"></el-table-column>
                <!-- 结束时间 -->
                <el-table-column prop="endTime" label="结束时间" align="center"></el-table-column>
                <!-- 优惠券状态 1-正常 2-不能领取(已经领取的能够正常使用) 3-不能领取(已经领取的不能够使用) -->
                <el-table-column prop="status" label="优惠券状态" align="center"></el-table-column>
                <!-- 操作-->
                <el-table-column label="操作"  align="center">
				    <template slot-scope="scope">
				        <el-button
				            type="text"
				            icon="el-icon-edit"
				            @click="handleEdit(scope.$index, scope.row)"
				        >详情</el-button>
					</template>
				</el-table-column> 
            </el-table>
			<!-- 页码功能 -->
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageNum"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <el-dialog :title="title" :visible.sync="editVisibles" width="85%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="已领取">
                    <el-input v-model="form.received" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="未领取">
                    <el-input v-model="form.notreceived" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="领取已使用">
                    <el-input v-model="form.claimused" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="领取未使用">
                    <el-input v-model="form.claimunused" placeholder="请输入"></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>
        </el-dialog>
        <!--  -->
        <el-dialog :title="title" :visible.sync="editVisible" width="85%">
            <el-form ref="form" :model="form" label-width="70px">
                <!-- 优惠券类型 1-平台券 2-商家券 -->
                <el-form-item label="优惠券类型">
                    <el-select placeholder="请选择" v-model="form.voucherType">
                        <el-option key="1" label="平台券" value="1"></el-option>
                        <el-option key="2" label="商家券" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分销商">
                    <el-select v-model="form.distributorId" @change="selectdistributorId"
                               :disabled="!form.id?false:true">
                        <el-option v-for="item in distributorIds" :key="item.id" :label="item.name"
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
               <!-- 使用类型 1-针对全部商品 2-针对一个类型的商品(商家券才有此功能) 3-针对一个商品(商家券才有此功能) -->
               <el-form-item label="使用类型">
                    <el-select
                        placeholder="请选择"
                        v-model="form.useType"
                        @change="selsectChangeType"
                        >
                        <el-option key="1" label="全部" value="1"></el-option>
                        <el-option key="2" label="类型" value="2"></el-option>
                        <el-option key="3" label="商品" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <!-- id要传给他resId -->
                <el-form-item label="请选择类型"  v-if="form.useTypeShow">
                    <el-select placeholder="请选择" v-model="form.resId">
                        <el-option
                            v-for="(item, index) in categorys"
                            :key="index"
                            :label="item.categoryName"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- id要传给他resId -->
                <el-form-item label="请选择商品"  v-if="form.useTypeShows">
                    <el-select placeholder="请选择" v-model="form.resId">
                        <el-option
                            v-for="(items, index) in goodsss"
                            :key="index"
                            :label="items.title"
                            :value="items.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
               <!-- 券种 1-满减券 2-折扣券 listcategroysz -->
                <el-form-item label="请选择">
                    <el-select placeholder="请选择" v-model="form.type">
                        <el-option key="1" label="满减券" value="1"></el-option>
                        <el-option key="2" label="折扣券" value="2"></el-option>
                    </el-select>
                </el-form-item>
                 <!--type=1 显示  大于等于多少金额可用此券 0-不做限制 
                 <el-form-item label="满多少才可以减">
                    <el-input v-model="form.conditionPrice" placeholder="请输入"></el-input>
                </el-form-item>-->
               <!-- 优惠券金额 -->
                <el-form-item label="优惠多少">
                    <el-input v-model="form.voucherPrice" placeholder="请输入"></el-input>
                </el-form-item>
                <!-- 折扣  数字/100=折扣 -->
                <el-form-item label="折扣">
                    <el-input v-model="form.discount" placeholder="请输入"></el-input>
                </el-form-item>
                <!-- type=2  显示   -->
                <el-form-item label="折扣数目">
                    <el-input v-model="form.maxDiscountPrice" placeholder="请输入"></el-input>
                </el-form-item>
                <!-- 多少张优惠券 -->
                <el-form-item label="优惠券几张">
                    <el-input v-model="form.number" placeholder="请输入"></el-input>
                </el-form-item>
                <!-- 开始时间 -->
                <el-form-item label="开始时间">
                    <el-col :span="11">
                        <el-date-picker
                            type="date"
                            placeholder="开始售卖时间"
                            v-model="form.startTime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            style="width: 100%;"
                        ></el-date-picker>
                    </el-col>
                </el-form-item>
                <!-- 结束时间 -->
                <el-form-item label="结束时间">
                    <el-col :span="11">
                        <el-date-picker
                            type="date"
                            placeholder="结束售卖时间"
                            v-model="form.endTime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            style="width: 100%;"
                        ></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="不同登录的优惠">
                    <el-select placeholder="请选择" v-model="form.view">
                        <el-option key="0" label="全部" value="0"></el-option>
                        <el-option key="1" label="小程序" value="1"></el-option>
                        <el-option key="2" label="H5" value="2"></el-option>
                        <el-option key="3" label="公众号" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 优惠券说明 -->
                <el-form-item label="优惠券说明">
                    <el-input v-model="form.explain" placeholder="请输入"></el-input>
                </el-form-item>
                <!-- 备注 -->
                <el-form-item label="备注">
                    <el-input v-model="form.remark" placeholder="请输入"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateClick(form)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<!-- 功能实现 -->
<script>
import md5 from 'js-md5';
// 富文本
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor } from 'vue-quill-editor';
import { dynamicHeader } from '../../../utils/dcf2d0812e764796a97bb2e8c1725fab.js'
export default {
    name: 'basetable',
    data() {
        return {
            form:{
                voucherType: '1',
                useType: '1',
                type: '1',
                useTypeShow: false,
                useTypeShows:false
            },
            query: {
                    pageNum: 1,
                    pageSize: 10,
                    param: {
                        useType:"",
                        startTime:"",
                        endTime:"",
                        voucherType:""
                    }
                },
            distributorIds: [],
            title:"编辑",
            ortool:false,
            // form:{},
            editVisibles:false,
            editVisible:false,    
            tableData: [],
            multipleSelection: [],
            pageTotal: 0,
            id: -1,
            dropDownData:[],
            userTypes:[],
            delFlag:'0',
            categorys:{},
            goodsss:{}
        };
    },
    created() {
        this.tablist();
        this.goodsd();
        this.category();
    },
    methods: {
        // 使用类型change
        selsectChangeType(el){
            if(el === '1'){
                this.form.useTypeShow = false
                this.form.useTypeShows = false
            }else if (el === '2') {
                this.form.useTypeShows = false
                this.form.useTypeShow = true
            }else if( el === '3'){
                this.form.useTypeShow = false
                this.form.useTypeShows = true
            }else {
                this.form.useTypeShow = false
            }
        },
        distributorslist() {
                distributorslist({
                    pageSize: 500
                }).then(res => {
                    if (res.returnCode == 200) {
                        if (!this.form.distributorId) {
                            this.form.distributorId = res.data.list[0].id;
                        }
                        this.distributorIds = res.data.list;
                        this.level = 1;
                        this.parentId = 0;
                        this.fromcategory();
                    } else {

                    }
                });
            },
        selectdistributorId(value) {
                this.form.distributorId = value;
                this.level = 1;
                this.parentId = 0;
                this.ortool = false;
                this.fromcategory();
        },
        fromcategory() {
                var level = this.level;
                var parentId = this.parentId;
                fromcategory({
                    distributorId: this.form.distributorId,
                    level: level,
                    parentId: parentId
                }).then(res => {
                    if (res.returnCode == 200) {
                        if (level == 1) {
                            this.parentids = res.data;
                            this.level = level + 1;
                            if (!this.form.id) {
                                this.parentId = res.data[0].categoryId;
                                this.parentid = res.data[0].categoryId;
                                if (res.data[0].categoryName == '工具') {
                                    this.ortool = true;
                                }
                            } else {
                                var parentIds = this.parentids;
                                var parentId = this.parentid;
                                this.parentId = this.parentid;
                                for (var i = 0; i < parentIds.length; i++) {
                                    if (parentIds[i].categoryId == parentId && parentIds[i].categoryName == '工具') {
                                        this.ortool = true;
                                    }
                                }
                            }
                            this.fromcategory();
                        } else {
                            this.categoryIds = res.data;
                            if (!this.form.id) {
                                this.form.categoryId = res.data[0].id;
                            }

                        }
                    } else {
                        this.$message.success(`该分类下没有内容，请选择其它分类`);
                    }
                });
            },
		tablist() {
            //券列表··· 
			voucherList(this.query).then(res => {
                if(res.returnCode == 200){
                    this.tableData = res.data.list;
                    this.pageTotal = res.data.total;
                }else{
                    this.tableData = null;
                    this.pageTotal = 0;
                }
			})
        },
        // useType==2 展示改下拉 id categoryName
        category(){
            listcategroys().then(res =>{
                this.categorys=res.data;
            })
        },
        // useType==3 展示这个下拉 id title
        goodsd(){
            goodsDrop().then(res =>{
                this.goodsss=res.data;
            }) 
        },
        addVolume(){
            this.title="新增优惠券";
            this.ortool=false;
            this.goodsd();
            this.category();
            this.distributorslist();
            userDown().then(res => {
                if(res.returnCode == 200){
                    this.userTypes = res.data;
                }
            });
            this.editVisible = true;
        },
        handleEdit(index, row) {
                this.title = '优惠券详情';
                this.idx = index;
                this.details(row.id);
        },
        details(id){
            voucherDetails(id).then(res => {
                if(res.returnCode == 200){
                    var row=res.data;
                    this.form = row;
                    this.editVisibles=true;
                }else{
                     
                }
            })
        },
        updateClick(row){
            if(row.signInfoId){
                this.update(row);
            }else{
                this.add(row);
            }
         },
         update(row){
            integralUpdate({
                signInfoId:row.signInfoId,
                ruleName:row.ruleName,
                signInfoType:row.signInfoType,
                ruleKey:row.ruleKey,
                ruleGradeJson:row.ruleGradeJson,
                delFlag:row.delFlag
               }).then(res => {
                    if(res.returnCode === 200)this.tablist()
                    this.$message.success(`修改第 ${this.idx + 1} 行成功`);
                    this.editVisible=false;
                }, err => {
                    console.log('err--', err)
                })
            this.$set(this.tableData, this.idx, this.form);
        },
        add(row){
            voucherAdd({
                voucherType:row.voucherType,
                useType:row.userType,
                type:row.type,
                voucherPrice:row.voucherPrice,
                conditionPrice:row.conditionPrice,
                discount:row.discount,
                maxDiscountPrice:row.maxDiscountPrice,
                number:row.number,
                startTime:row.startTime,
                endTime:row.endTime,
                status:row.status,
                view:row.view,
                explain:row.explain,
                remark:row.remark
            }).then(res => {
                if(res.returnCode === 200)this.tablist()
                this.$message.success(`新增商品成功`);
                this.editVisible=false;
            }, err => {
                    console.log('err--', err)
            })  
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageNum', 1);
            this.tablist();
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
         // 分页导航
        handlePageChange(val) {
                this.$set(this.query, 'pageNum', val);
                this.tablist();
        },
        
    }
};
</script>
<!-- css样式实现 -->
<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
